<template>
	<view class="content">
		<image class="ui_bg_home" src="/static/img/bg_home.png" mode=""></image>
		<view class="ui_head" :style="'margin-top:'+top+'rpx'">
			<image class="ui_head_logo" src="/static/img/logo.png"></image>

			<view class="ui_head_banner">
				<u-swiper :list="banner" :radius="8" height="280rpx" @click="change"></u-swiper>
			</view>

			<view class="ui_head_notify">
				<image class="ui_head_notify_icon" src="/static/img/icon_notify.png"></image>
				<view class="ui_head_notify_text">精彩鳗直播，618惊喜福利等你来抢！</view>
				<u-icon name="arrow-right" size="10"></u-icon>
			</view>

			<view class="ui_head_menu">
				<view class="ui_head_menu_item" v-for="(item,index) in menus" :key="index" @click="goTo(item.path)">
					<image class="ui_head_menu_item_icon" :src="item.icon"></image>
					<image class="ui_head_menu_item_topicon" v-if="item.topicon" :src="item.topicon"></image>
					<view class="ui_head_menu_item_text">{{item.name}}</view>
				</view>
			</view>

			<view class="ui_head_buy">
				<view class="ui_head_buy_top">
					<image class="ui_head_buy_top_icon" src="/static/img/icon_buy.png"></image>
					<view class="ui_head_buy_top_line"></view>
					<view class="ui_head_buy_top_text">一起来围观鳗直播，256人正在抢!</view>
				</view>
				<view class="ui_head_buy_list">
					<view class="ui_head_buy_list_item" v-for="(item,index) in 2" :key="index">
						<image class="ui_head_buy_list_item_icon" src="/static/logo.png"></image>
						<view class="ui_head_buy_list_item_text">李冰冰</view>
						<view class="ui_head_buy_list_item_num">买过3次</view>
						<view class="ui_head_buy_list_item_content">15:25:32 购买鳗漫鲜鳗鱼100条</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 活动专区 -->
		<view class="ui_activity">
			<image class="ui_activity_bg" src="/static/img/bg_activity_0.png"></image>
			<view class="ui_activity_top">
				<view class="ui_activity_top_text">更多好物+</view>
			</view>
			<scroll-view class="ui_activity_list" scroll-x="true">
				<view class="ui_activity_list_item" v-for="(item,index) in 4" :key="index">
					<image class="ui_activity_list_item_img" src="https://img0.baidu.com/it/u=2748363669,2526559495&fm=253&fmt=auto&app=120&f=JPEG?w=760&h=760"></image>
					<view class="ui_activity_list_item_title">鳗漫鲜鳗鱼</view>
					<view class="ui_activity_list_item_sale">已售236</view>
					<view class="ui_activity_list_item_price">
						<view class="ui_activity_list_item_price_text">¥158.00</view>
						<image class="ui_activity_list_item_price_icon" src="/static/img/icon_price.png"></image>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 福利专区 -->
		<view class="ui_activity">
			<image class="ui_activity_bg" src="/static/img/bg_activity_1.png"></image>
			<view class="ui_activity_top">
				<view class="ui_activity_top_text">更多好物+</view>
			</view>
			<scroll-view scroll-x="true" class="ui_activity_list">
				<view class="ui_activity_list_item" v-for="(item,index) in 4" :key="index">
					<image class="ui_activity_list_item_img" src="https://img0.baidu.com/it/u=2748363669,2526559495&fm=253&fmt=auto&app=120&f=JPEG?w=760&h=760"></image>
					<view class="ui_activity_list_item_title">鳗漫鲜鳗鱼</view>
					<view class="ui_activity_list_item_sale">已售236</view>
					<view class="ui_activity_list_item_price">
						<view class="ui_activity_list_item_price_text">¥158.00</view>
						<image class="ui_activity_list_item_price_icon" src="/static/img/icon_price.png"></image>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 订货专享 -->
		<view class="ui_activity">
			<image class="ui_activity_bg" src="/static/img/bg_activity_2.png"></image>
			<view class="ui_activity_top">
				<view class="ui_activity_top_text">更多好物+</view>
			</view>
			<scroll-view scroll-x="true" class="ui_activity_list">
				<view class="ui_activity_list_item" v-for="(item,index) in 4" :key="index">
					<image class="ui_activity_list_item_img" src="https://img0.baidu.com/it/u=2748363669,2526559495&fm=253&fmt=auto&app=120&f=JPEG?w=760&h=760"></image>
					<view class="ui_activity_list_item_title">鳗漫鲜鳗鱼</view>
					<view class="ui_activity_list_item_sale">100件起订</view>
					<view class="ui_activity_list_item_price" style="background-color: #FFFAEE;">
						<view class="ui_activity_list_item_price_text2">¥158.00</view>
						<image class="ui_activity_list_item_price_icon2" src="/static/img/icon_price_1.png"></image>
					</view>
				</view>
			</scroll-view>
		</view>

		<image class="ui_banner" src="/static/img/home_banner.png"></image>

		<!-- 好物推荐 -->
		<view class="ui_good">
			<image class="ui_good_icon" src="/static/img/icon_hwtj.png"></image>
			<view class="ui_good_line"></view>
			<view class="ui_good_text">好物推荐 优品优价</view>
			<image class="ui_good_ricon" src="/static/img/icon_goto.png"></image>
		</view>

		<view class="ui_list">
			<view class="ui_list_item" v-for="(item,index) in 5" :key="index">
				<image class="ui_list_item_img" src="https://img0.baidu.com/it/u=2748363669,2526559495&fm=253&fmt=auto&app=120&f=JPEG?w=760&h=760"></image>
				<view class="ui_list_item_title">鳗漫鲜鳗鱼</view>
				<view class="ui_list_item_lables">
					<view class="ui_list_item_lables_item">热卖单品</view>
					<view class="ui_list_item_lables_item2">促销单品</view>
				</view>
				<view class="ui_list_item_price">¥158.00</view>
				<view class="ui_list_item_sale">已售236</view>
				<image class="ui_list_item_add" src="/static/img/icon_add.png"></image>
			</view>
		</view>


		<view style="height: 200rpx;"></view>
		<tabbar :current-page="0"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				banner: ['/static/img/banner.png'],
				menus: [{
						icon: '/static/img/icon_mune_0.png',
						name: '鳗鱼产业',
						path: '/pages/index/manyu'
					}, {
						icon: '/static/img/icon_mune_1.png',
						name: '新手必看',
						path: '/pages/index/xinshou'
					}, {
						icon: '/static/img/icon_mune_2.png',
						name: '邀请海报',
						path: '/pages/index/invite'
					},
					{
						icon: '/static/img/icon_mune_3.png',
						name: '绑定橱窗',
						path: '/pages/index/bind'
					}, {
						icon: '/static/img/icon_mune_4.png',
						name: '鳗直播',
						path: '/pages/index/manyu',
						topicon: '/static/img/icon_mune_44.png',
					}
				]
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log('状态栏高度:', res.statusBarHeight * 2);
					that.top = res.statusBarHeight * 2;
				}
			})
		},
		methods: {
			goTo(url) {
				console.log(url)
				this.$util.navTo(url)
			},
		}
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.ui_bg_home {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			z-index: 8;
		}

		.ui_list {
			width: 714rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin-top: 20rpx;

			&_item {
				margin-left: 15rpx;
				margin-bottom: 20rpx;
				width: 340rpx;
				display: flex;
				flex-direction: column;
				background-color: #fff;
				position: relative;
				padding: 0rpx 12rpx;
				border-radius: 12rpx;

				&_img {
					width: 300rpx;
					height: 300rpx;
					margin: 20rpx 23rpx;
				}

				&_title {
					font-size: 30rpx;
					color: #000;
				}

				&_lables {
					margin-top: 15rpx;
					display: flex;

					&_item {
						font-size: 18rpx;
						border: 1rpx solid #F5415C;
						color: #F5415C;
						padding: 2rpx 3rpx;
						margin-right: 10rpx;
						border-radius: 8rpx;
						background: #FFF8F8;
					}
					&_item2 {
						font-size: 18rpx;
						border: 1rpx solid #9F6F26;
						color: #9F6F26;
						padding: 2rpx 3rpx;
						margin-right: 10rpx;
						border-radius: 8rpx;
						background: #FFFAEE;
					}
				}

				&_price {
					margin-top: 20rpx;
					font-size: 32rpx;
					color: #9F6F26;
					font-weight: bold;
				}

				&_sale {
					font-size: 20rpx;
					color: #999;
					margin-top: 15rpx;
					margin-bottom: 20rpx;
				}

				&_add {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					bottom: 15rpx;
					right: 15rpx;
				}
			}
		}

		.ui_banner {
			width: 714rpx;
			height: 160rpx;
			border-radius: 12rpx;
			margin: 20rpx 12rpx;
		}

		.ui_good {
			width: 714rpx;
			height: 100rpx;

			display: flex;
			align-items: center;
			padding: 0 12rpx;
			position: relative;

			&_icon {
				width: 158rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			&_line {
				width: 1rpx;
				height: 30rpx;
				margin-right: 20rpx;
				background-color: #826A46;
			}

			&_text {
				color: #826A46;
				font-size: 24rpx;
			}

			&_ricon {
				width: 60rpx;
				height: 50rpx;
				position: absolute;
				right: 12rpx;
				top: 30rpx;
			}
		}

		.ui_activity {
			margin-top: 20rpx;
			width: 714rpx;
			display: flex;
			flex-direction: column;
			border-radius: 12rpx;
			position: relative;
			margin-bottom: 20rpx;
			
			&_bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 714rpx;
				height: 500rpx;
			}

			&_list {
				width: 706rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				display: flex;
				white-space: nowrap;
				overflow-x: scroll;
				overflow: auto;

				&_item {
					margin-left: 12rpx;
					width: 220rpx;
					display: inline-block;
					flex-direction: column;

					&_img {
						width: 210rpx;
						height: 210rpx;
						border-radius: 12rpx;
						margin-bottom: 10rpx;
						background-color: #fff;
					}

					&_title {
						font-size: 24rpx;
						color: #666;
						margin-bottom: 15rpx;
					}

					&_sale {
						font-size: 20rpx;
						color: #999;
						margin-bottom: 15rpx;
					}

					&_price {
						width: 210rpx;
						height: 44rpx;
						margin-bottom: 20rpx;
						background-color: #FFECEC;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						position: relative;

						&_text {
							font-size: 30rpx;
							font-weight: bold;
							margin-left: 10rpx;
							color: #EB2D2D;
						}

						&_icon {
							position: absolute;
							right: 0rpx;
							top: 0rpx;
							width: 80rpx;
							height: 44rpx;
						}
						
						
						&_text2 {
							font-size: 30rpx;
							font-weight: bold;
							margin-left: 10rpx;
							color: #9F6F26;
						}
						
						&_icon2 {
							position: absolute;
							right: 0rpx;
							top: 0rpx;
							width: 112rpx;
							height: 44rpx;
						}
					}
				}
			}

			&_top {
				display: flex;
				height: 90rpx;
				align-items: center;
				position: relative;

				&_text {
					font-size: 23rpx;
					position: absolute;
					top: 30rpx;
					right: 22rpx;
					color: #fff;
				}
			}

		}


		.ui_head {
			width: 714rpx;
			display: flex;
			flex-direction: column;

			&_buy {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				background: linear-gradient(0deg, #E3B87F 0%, #FCEEDA 100%);
				border-radius: 12rpx;

				&_list {
					width: 96%;
					margin-left: 2%;
					margin-bottom: 5rpx;
					background-color: #fff;
					border-radius: 10rpx;
					padding: 0 12rpx;

					&_item {
						display: flex;
						height: 80rpx;
						align-items: center;
						position: relative;

						&_icon {
							width: 50rpx;
							height: 50rpx;
							border-radius: 25rpx;
							margin-right: 10rpx;
						}

						&_text {
							font-size: 26rpx;
							color: #333;
							margin-right: 10rpx;
						}

						&_num {
							font-size: 18rpx;
							color: #9F6F26;
							padding: 4rpx 8rpx;
							border: 1rpx solid #9F6F26;
							border-radius: 8rpx;
							background-color: #FFFAEE;
						}

						&_content {
							font-size: 24rpx;
							color: #333;
							position: absolute;
							right: 10rpx;
							top: 25rpx;
						}
					}
				}

				&_top {
					display: flex;
					align-items: center;
					height: 80rpx;
					padding: 0 20rpx;

					&_icon {
						width: 130rpx;
						height: 25rpx;
						margin-right: 20rpx;
					}

					&_line {
						width: 1rpx;
						height: 30rpx;
						margin-right: 20rpx;
						background-color: #AA9D8B;
					}

					&_text {
						color: #84755F;
						font-size: 22rpx;
					}
				}
			}

			&_menu {
				background-color: #fff;
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				border-radius: 12rpx;

				&_item {
					width: 145.2rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #333;
					padding-bottom: 20rpx;
					position: relative;

					&_icon {
						width: 90rpx;
						height: 90rpx;
						margin: 20rpx 0;
					}
					&_topicon {
						width: 40rpx;
						height: 28rpx;
						position: absolute;
						top: 22rpx;
						right: 18rpx;
					}
				}
			}

			&_logo {
				width: 165rpx;
				height: 73rpx;
				margin-left: 12rpx;
				z-index: 88;
			}

			&_banner {
				margin-top: 20rpx;
				z-index: 888;
				width: 100%;
			}

			&_notify {
				display: flex;
				align-items: center;
				height: 60rpx;
				width: 100%;
				padding: 0 12rpx;
				border-radius: 10rpx;
				border: 1rpx solid #eee;
				background-color: #fff;
				margin-top: 20rpx;

				&_icon {
					width: 90rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				&_text {
					flex: 1;
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}
</style>